<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>合并/拆分单元格</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
</head>

<body>
  <h1>合并/拆分单元格</h1>
  <div id="spreadsheet"></div>

  <div>
    <button type="button" id="btn1">合并单元格 A3 (colspan: 2, rowspan: 2)</button>
    <button type="button" id="btn2">从A3拆分合并单元格</button>
    <button type="button" id="btn3">获取所有的合并单元格</button>
    <button type="button" id="btn4">拆分所有合并单元格</button>
  </div>

  <div style="margin-top: 30px;">
    <textarea id="console" style="width: 100%;"></textarea>
  </div>

  <script type="module">
    import { text } from "./js/language.js";

    let oBtn1 = document.getElementById('btn1');
    let oBtn2 = document.getElementById('btn2');
    let oBtn3 = document.getElementById('btn3');
    let oBtn4 = document.getElementById('btn4');
    let oConsole = document.getElementById('console');


    var data = [
      ['Mazda', 2001, 2000, '2006-01-01'],
      ['Pegeout', 2010, 5000, '2005-01-01'],
      ['Honda Fit', 2009, 3000, '2004-01-01'],
      ['Honda CRV', 2010, 6000, '2003-01-01'],
    ];

    // 表格初始化配置，生成table
    var table = jspreadsheet(document.getElementById('spreadsheet'), {
      data: data,
      colHeaders: ['Model', 'Year', 'Price', 'Date'],
      colWidths: [300, 80, 100, 100],
      columns: [
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
        { type: 'calendar' },
      ],
      mergeCells: {
        // [colspan, rowspan]
        A1: [2, 1]
      },
      // 10行10列
      minDimensions: [10, 10],
      // 语言格式化
      text
    });

    // 通过table对象来操作table
    console.log('table 对象：', table);
    // 1、合并指定的单元格
    oBtn1.onclick = function () {
      table.setMerge('A3', 2, 2);
    }

    // 2、从A3拆分合并单元格
    oBtn2.onclick = function () {
      table.removeMerge('A3');
    }

    // 3、获取所有的合并单元格信息
    oBtn3.onclick = function () {
      oConsole.innerHTML = JSON.stringify(table.getMerge());
    }

    // 4、拆分所有合并单元格
    oBtn4.onclick = function () {
      table.destroyMerged();
    }
  </script>
</body>

</html>